<template>
  <div class="goods-container">
    <!-- 添加搜索结果提示 -->
    <div class="search-result" v-if="keyword">
      <el-alert
        :title="`搜索 '${keyword}' 的结果：共找到 ${filteredGoods.length} 个商品`"
        type="success"
        :closable="false"
        show-icon
      >
        <el-button 
          size="small" 
          type="text" 
          class="clear-search"
          @click="resetFilter"
        >
          清除搜索
        </el-button>
      </el-alert>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <el-card>
        <div class="filter-title">价格区间</div>
        <el-form :inline="true" class="price-filter">
          <el-form-item>
            <el-input
              v-model="priceRange.min"
              placeholder="最低价"
              type="number"
              size="small"
            ></el-input>
          </el-form-item>
          <span class="separator">-</span>
          <el-form-item>
            <el-input
              v-model="priceRange.max"
              placeholder="最高价"
              type="number"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="filterByPrice">筛选</el-button>
            <el-button size="small" @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 商品列表区域 -->
    <div class="goods-list">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in filteredGoods" :key="item.id">
          <el-card :body-style="{ padding: '0px' }" class="goods-item">
            <!-- 图片区域可点击跳转到详情页 -->
            <div class="img-container" @click="goToDetail(item.id)">
              <img :src="item.picture" class="goods-image">
            </div>
            <div class="goods-info">
              <!-- 标题可点击跳转到详情页 -->
              <h3 class="title" @click="goToDetail(item.id)">{{ item.title }}</h3>
              <div class="price-info">
                <span class="price">¥{{ item.price }}</span>
                <span class="pay">{{ item.pay }}</span>
              </div>
              <div class="address">
                <i class="el-icon-location"></i>
                <span>{{ item.address }}</span>
              </div>
              <!-- 操作按钮区域 -->
              <div class="button-group">
                <el-button type="primary" size="small" @click="goToDetail(item.id)">立即购买</el-button>
                <el-button type="warning" size="small" @click="addToCart(item)">加入购物车</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Goods',
  data() {
    return {
      goodsList: [], // 所有商品数据
      priceRange: {
        min: '',
        max: ''
      },
      keyword: '' // 添加关键词属性
    }
  },
  computed: {
    filteredGoods() {
      let result = this.goodsList;
      
      // 先按关键词筛选
      if (this.keyword) {
        result = result.filter(item => {
          return item.title.toLowerCase().includes(this.keyword.toLowerCase());
        });
      }
      
      // 再按价格筛选
      if (this.priceRange.min || this.priceRange.max) {
        result = result.filter(item => {
          const price = Number(item.price);
          const min = this.priceRange.min ? Number(this.priceRange.min) : 0;
          const max = this.priceRange.max ? Number(this.priceRange.max) : Infinity;
          return price >= min && price <= max;
        });
      }
      
      return result;
    }
  },
  watch: {
    // 监听路由参数变化
    '$route.query.keyword': {
      immediate: true,
      handler(newKeyword) {
        this.keyword = newKeyword || '';
        if (newKeyword && this.goodsList.length > 0) {
          this.$message.success(`找到 ${this.filteredGoods.length} 个相关商品`);
        }
      }
    }
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    // 获取商品列表
    getGoodsList() {
      this.$axios
        .get("/products/app/goods")
        .then(res => {
          this.goodsList = res.data;
          // 如果有搜索关键词，显示搜索结果数量
          if (this.keyword) {
            this.$message.success(`找到 ${this.filteredGoods.length} 个相关商品`);
          }
        })
        .catch(err => {
          this.$message.error('获取商品列表失败');
          return Promise.reject(err);
        });
    },
    // 价格筛选
    filterByPrice() {
      if (this.priceRange.max && Number(this.priceRange.min) > Number(this.priceRange.max)) {
        this.$message.warning('最低价不能大于最高价');
        return;
      }
      // 筛选功能通过计算属性实现
    },
    // 重置筛选
    resetFilter() {
      this.priceRange.min = '';
      this.priceRange.max = '';
      // 清除搜索关键词
      if (this.keyword) {
        this.$router.replace('/goods');
      }
    },
    goToDetail(id) {
      this.$router.push(`/goods/detail/${id}`);
    },
    addToCart(item) {
      // 检查是否登录
      if (!this.$store.getters.getUser) {
        this.$message.warning('请先登录');
        this.$store.commit('setShowLogin', true);
        return;
      }
      // TODO: 实现加入购物车逻辑
      this.$message.success('成功加入购物车');
    }
  }
}
</script>

<style scoped>
.goods-container {
  max-width: 1225px;
  margin: 0 auto;
  padding: 20px;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
}

.price-filter {
  display: flex;
  align-items: center;
}

.separator {
  margin: 0 10px;
  color: #999;
}

.goods-item {
  height: 450px;
  margin-bottom: 20px;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}

.goods-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.img-container {
  cursor: pointer;
  overflow: hidden;
}

.title {
  cursor: pointer;
  font-size: 14px;
  color: #333;
  margin: 0;
  height: 40px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
}

.title:hover {
  color: #ff6700;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
}

.button-group .el-button {
  width: 48%;
  padding: 7px 0;
}

.goods-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.img-container:hover .goods-image {
  transform: scale(1.05);
}

.goods-info {
  padding: 14px;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.price-info {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #ff6700;
  font-size: 18px;
  font-weight: bold;
}

.pay {
  color: #999;
  font-size: 12px;
}

.address {
  color: #666;
  font-size: 12px;
  margin-bottom: 15px;
}

.address i {
  margin-right: 5px;
}

/* 响应式布局 */
@media screen and (max-width: 1200px) {
  .el-col-6 {
    width: 33.33%;
  }
}

@media screen and (max-width: 768px) {
  .el-col-6 {
    width: 50%;
  }
}

@media screen and (max-width: 480px) {
  .el-col-6 {
    width: 100%;
  }
}

.search-result {
  margin-bottom: 20px;
}

.clear-search {
  margin-left: 15px;
}

.el-alert {
  display: flex;
  align-items: center;
}
</style> 